<template>
  <div id="prinDeliveryOrder">
    <el-card class="box-card" style="margin:15px 15px 0px 15px;">
      <el-form
        ref="basicForm"
        :inline="true"
        :rules="basicDataRules"
        :model="basicData.model"
        class="demo-form-inline"
        label-width="100px"
      >
        <el-row>
          <el-col :span="6">
            <el-form-item label="所属区县:" prop="areaId.key">
              <el-select
                size="mini"
                v-model="basicData.model.areaId.key"
                placeholder="选择"
                @change="clickOrgTree"
              >
                <el-option
                  v-for="(item, index) in orgTree"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属医院:" prop="hospitalId.key" id="yiyuan">
              <el-select
                size="mini"
                v-model="basicData.model.hospitalId.key"
                placeholder="选择"
                @change="clickOrgTreeC"
              >
                <el-option
                  v-for="(item, index) in orgTreeC"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="所属部门:" prop="departId.key">
              <el-select size="mini" v-model="basicData.model.departId.key" placeholder="选择">
                <el-option
                  v-for="(item, index) in orgTreeCs"
                  :key="index"
                  :label="item.label"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="6">
            <el-form-item label="递送批号:" prop="deliveryId">
              <el-input size="mini" v-model="basicData.model.deliveryId" placeholder="输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="递送日期:" prop="deliveryDate" id="disong">
              <el-date-picker
                size="mini"
                v-model="basicData.model.deliveryDate"
                style="width:100%"
                type="daterange"
                range-separator="至"
                value-format="yyyy-MM-dd"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="buttom">
        <el-button type="primary" size="small" style="width:100px" @click="onSubmit('query')">查询</el-button>
        <el-button size="small" @click="onSubmit('reset')">清空</el-button>
      </div>
    </el-card>
    <el-card class="box-card" style="margin:5px 15px;padding:0">
      <!-- 头部按钮 -->
      <div>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-printer"
          @click="showDialog('print')"
        >打印</el-button>
        <el-button
          size="small"
          type="primary"
          icon="el-icon-printer"
          @click="showDialog('tPrint')"
        >统计打印</el-button>
      </div>
      <!-- 表格 -->
      <TableTrees
        :table-data="tableData"
        @tabSelectChange="tabSelectChange"
        :table-title="tableTitle"
        @clickDetails="clickDetails"
        @clickEdit="clickEdit"
      ></TableTrees>
    </el-card>
    <!-- 打印弹窗 -->
    <el-dialog :visible.sync="dialogShow" width="80%">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: bold;color:#fff;display: flex;justify-content: center;"
      >递送打印</span>
      <print ref="print" :data="printData"></print>
      <span slot="footer" class="dialog-footer flex">
        <el-button
          size="small"
          v-print="'#print'"
          type="primary"
          style="padding: 6px 19px;"
          @click="clickPrint"
        >打 印</el-button>
      </span>
    </el-dialog>

    <!-- 详情 -->
    <el-dialog :visible.sync="detailsShow" width="85%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >详情</span>
      <div style="height:400px">
        <el-row>
          <el-col :span="6">寄出批号：{{ detailsData.deliveryId }}</el-col>
          <el-col :span="6">寄出日期：{{ detailsData.deliveryTime }}</el-col>
          <el-col :span="6">寄出人员：{{ detailsData.deliveryMan }}</el-col>
          <el-col :span="6">
            寄出方式：{{
            detailsData.deliveryWay ? detailsData.deliveryWay.data : ""
            }}
          </el-col>
          <el-col :span="6">快递人员：{{ detailsData.courier }}</el-col>
          <el-col :span="6">验收部门：{{ detailsData.receiveDepart }}</el-col>
          <el-col :span="6">快递批号：{{ detailsData.courierNum }}</el-col>
          <el-col :span="6">备注：{{ detailsData.memo }}</el-col>
        </el-row>
        <el-table
          :data="detailsData.tableData"
          style="width: 100%;padding:5px;"
          :header-cell-style="{
            background: '#333333',
            color: '#ffffff',
            textAlign: 'center'
          }"
        >
          <el-table-column align="center" prop="barCode" label="条形码号" width="150" />
          <el-table-column align="center" prop="birthTime" label="出生日期">
            <template slot-scope="scope">
              <span>{{ scope.row.birthTime?scope.row.birthTime.substr(0, 10):'' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="bloodTime" label="采血日期">
            <template slot-scope="scope">
              <span>{{ scope.row.bloodTime?scope.row.bloodTime.substr(0, 10):'' }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="experimentKeywords.data" label="实验项目" />
          <el-table-column align="center" prop="momName" label="母亲姓名" />
          <el-table-column align="center" prop="babySex.data" label="性别" />
          <el-table-column align="center" prop="bloodProperty.data" label="样本类型" />
        </el-table>
      </div>
    </el-dialog>

    <!-- 修改 -->
    <el-dialog :visible.sync="editShow" width="85%" center custom-class="print-dialog">
      <span
        slot="title"
        class="dialog-title"
        style="font-size: 18px;font-weight: 400;color: #FFFFFF;"
      >修改</span>
      <div style="height:300px">
        <el-form
          ref="editForm"
          :inline="true"
          :rules="editDataRules"
          :model="editData"
          class="demo-form-inline"
          label-width="100px"
        >
          <el-row v-if="editData != null">
            <el-col :span="12">
              <el-form-item label="寄出批号:" prop="deliveryId">
                <el-input disabled size="mini" v-model="editData.deliveryId" placeholder="输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="寄出日期:" prop="deliveryTime">
                <el-date-picker
                  :format="deliveryTimeFormat"
                  @focus="editData.deliveryTime = ''"
                  v-model="editData.deliveryTime"
                  type="date"
                  value-format="yyyy-MM-dd"
                  placeholder="选择日期"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="寄出人员:" prop="deliveryMan">
                <el-input size="mini" v-model="editData.deliveryMan" placeholder="输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="寄出方式:" prop="deliveryWay.key">
                <el-select size="mini" v-model="editData.deliveryWay.key">
                  <el-option
                    v-for="(item, key, index) in dicts.DELIVERY_WAY"
                    :key="item"
                    :label="item"
                    :value="key"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="快递人员:" prop="courier">
                <el-input size="mini" v-model="editData.courier" placeholder="输入" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="快递批号:" prop="courierNum">
                <el-input size="mini" v-model="editData.courierNum" placeholder="输入" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="验收部门:" prop="receiveDepart">
                <el-input disabled size="mini" v-model="editData.receiveDepart" placeholder="输入" />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注信息:" prop="memo">
                <el-input size="mini" v-model="editData.memo" type="textarea" style="width:600px" />
              </el-form-item>
            </el-col>
            <el-col :span="24" style="display: flex;justify-content: center;margin-top: 20px;">
              <el-button
                type="primary"
                size="small"
                style="width:100px"
                @click="onSubmit('edit')"
              >保存</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import TableTrees from "@/components/table-tree/index";
import orgApi from "@/api/Org.js";
import DeliveryExpApi from "@/api/DeliveryExp.js";
import print from "./print.vue";

import { initDicts } from "@/utils/commons";
export default {
  components: { TableTrees, print },
  data() {
    return {
      deliveryTimeFormat: "MMdd",
      dicts: {
        DELIVERY_WAY: {}
      },
      // 详情
      detailsShow: false,
      // 详情
      editShow: false,
      // 配置选项
      props: {
        label: "id", // 需要指定的节点渲染对象属性
        children: "children" // 指定的子级
      },
      // 转菊花
      loading: false,
      // 打印对话框
      dialogShow: false,
      // 是否显示更多查询
      morderShow: true,
      // 表头
      tableTitle: [
        {
          prop: "id",
          label: "批号"
        },
        {
          prop: "personnel",
          label: "递送人员"
        },
        {
          prop: "date",
          label: "递送日期"
        },
        {
          prop: "gross",
          label: "总量"
        },
        {
          prop: "organization",
          label: "验收机构"
        },
        {
          prop: "remark",
          label: "备注"
        },
        {
          prop: "expPerson",
          label: "快递人员"
        },
        {
          prop: "expOrder",
          label: "快递单号"
        },
        {
          prop: "createdId",
          label: "操作者"
        },
        {
          prop: "createdDate",
          label: "操作日期"
        },
        {
          prop: "printNumber",
          label: "打印次数"
        }
      ],
      // 表数据
      tableData: [],
      // 选中数据
      selectList: [],
      // 基本数据
      basicData: {
        current: 1,
        map: {},
        model: {
          deliveryDate: [],
          areaId: {
            key: ""
          },
          deliveryId: "",
          deliveryTime: {
            end: "",
            start: ""
          },
          departId: {
            key: ""
          },
          hospitalId: {
            key: ""
          }
        },
        order: "descending",
        size: 10,
        sort: "id"
      },
      // 校验
      basicDataRules: {
        deliveryId: [{ message: "请输入递送批号", trigger: "change" }],
        barCode: [{ message: "请输入条形码号", trigger: "change" }],
        countyAndCitiesId: [{ message: "请选择所属区县", trigger: "change" }],
        hospitalId: [{ message: "请选择所属医院", trigger: "change" }],
        deptId: [{ message: "请选择所属部门", trigger: "change" }]
      },
      // 市县
      orgTree: [],
      // 医院
      orgTreeC: [],
      // 部门
      orgTreeCs: [],
      selectItem: {
        areaId: {
          key: ""
        },
        departId: {
          key: ""
        },
        hospitalId: {
          key: ""
        }
      },
      // 打印数据
      printData: {},
      // 详情数据
      detailsData: {},
      // 详情数据
      editData: {
        deliveryId: "",
        deliveryTime: "",
        deliveryMan: "",
        deliveryWay: {
          data: "",
          key: ""
        },
        courier: "",
        courierNum: "",
        receiveDepart: "",
        remark: ""
      },
      editDataRules: {
        deliveryId: [{ required: true, message: "   ", trigger: "change" }],
        deliveryTime: [{ required: true, message: "   ", trigger: "change" }],
        deliveryMan: [{ required: true, message: "   ", trigger: "change" }],
        receiveDepart: [{ required: true, message: "   ", trigger: "change" }]
      }
    };
  },
  mounted() {
    // 获取基础查询
    this.initOrgTree();
    this.getList(this.basicData);
    // 获取字典
    initDicts(["DELIVERY_WAY"], this.dicts);
  },
  methods: {
    // 寄出日期输入
    changeDeliveryTime(v) {
      this.editData.deliveryTime = v;
      if (this.editData.deliveryTime) {
        this.deliveryTimeFormat = "yyyy-MM-dd";
      } else {
        this.deliveryTimeFormat = "MMdd";
      }
    },
    getList(data) {
      DeliveryExpApi.printDeliveryOrder.page(data).then(res => {
        this.tableData = res.data.data.records;
        this.tableData.forEach((item, index) => {
          item.id = index.toString();
          item.deliveryId = `${item.number} ( 月份：${item.month} )  ( 批次数：${item.deliveryCount} )`;
          item.pTrue = true;
          item.children.forEach((i, n) => {
            i.PId = item.id;
          });
        });
      });
    },
    // 根据选择市县获取医院
    clickOrgTree(v) {
      this.orgTreeC = [];
      this.orgTreeCs = [];
      this.basicData.model.hospitalId.key = "";
      this.basicData.model.departId.key = "";
      this.selectItem.hospitalId.key = "";
      this.selectItem.departId.key = "";
      this.orgTree.filter(res => {
        if (res.id == v) {
          this.orgTreeC = res.children;
        }
      });
    },
    // 根据选择市县获取医院
    clickOrgTreeC(v) {
      this.orgTreeCs = [];
      this.basicData.model.departId.key = "";
      this.selectItem.departId.key = "";
      this.orgTreeC.filter(res => {
        if (res.id == v) {
          this.orgTreeCs = res.children;
        }
      });
    },
    // 获取基础查询
    initOrgTree() {
      orgApi.allTree({}).then(response => {
        const res = response.data;
        this.orgTree = res.data[0].children;
      });
    },
    // 点击展示与收起
    onMoreStatus() {
      this.morderShow = !this.morderShow;
    },
    // 全选
    tabSelectChange(v) {
      this.selectList = v;
    },
    // 详情
    clickDetails(v) {
      this.detailsData = v;
      DeliveryExpApi.printDeliveryOrder
        .selectBlood({ deliveryId: v.deliveryId })
        .then(res => {
          this.detailsShow = true;
          this.detailsData.tableData = res.data;
        });
    },
    // 修改
    clickEdit(v) {
      this.editShow = true;
      this.editData = v;
    },
    // 打印
    clickPrint() {
      this.$refs.print.printStatus = true;
    },
    // 查询、清空按钮
    onSubmit(type) {
      if (type == "query") {
        if (this.basicData.model.deliveryDate.length > 0) {
          this.basicData.model.deliveryTime.start = this.basicData.model.deliveryDate[0];
          this.basicData.model.deliveryTime.end = this.basicData.model.deliveryDate[1];
        }
        this.getList(this.basicData);
      } else if (type == "reset") {
        this.$refs["basicForm"].resetFields();
      } else if (type == "edit") {
        this.$refs["editForm"].validate(valid => {
          if (valid) {
            DeliveryExpApi.printDeliveryOrder
              .updateExpress(this.editData)
              .then(res => {
                if (res.status === 200) {
                  this.$message({
                    type: "success",
                    message: res.statusText
                  });
                  this.editShow = false;
                  this.getList(this.basicData);
                } else {
                  this.$message.error(res.statusText);
                }
              });
          } else {
            return false;
          }
        });
      }
    },
    // 点击顶部操作按钮
    // type 1：打印，2：统计打印
    showDialog(type) {
      if (type == "print") {
        if (this.selectList.length == 0) {
          this.$message.error("请选择数据!");
          return;
        }
        this.selectList;
        let ids = [];
        this.selectList.forEach(item => {
          if (item.deliveryId != undefined) {
            ids.push(item.deliveryId);
          }
        });
        DeliveryExpApi.printDeliveryOrder.printExpressDetail(ids).then(res => {
          this.printData = res.data;
          this.dialogShow = true;
        });
      } else if (type == "tPring") {
      } else {
      }
    },
    // 点击打印
    clickTruePrint() {
      this.handlePrintPrint();
    },
    // 打印事件
    handlePrintPrint() {
      if (this.upLoading) {
        this.$message({
          message: "数据加载中,请稍后...",
          type: "warning"
        });
      } else {
        this.CreateTablePage("print", "采血卡打印", "sampleManage");
      }
    }
  },
  watch: {
    "editData.deliveryTime": function(v) {
      this.changeDeliveryTime(v);
    },
  }
};
</script>

<style lang="less">
.flex {
  display: flex;
  align-items: center;
  justify-content: center;
}
#prinDeliveryOrder {
  #disong {
    .el-form-item__label {
      padding-right: 22px !important;
    }
  }
  #yiyuan {
    .el-select {
      padding-left: 11px;
    }
    @media screen and (max-width: 1450px) {
      .el-select {
        padding-left: 14px;
      }
    }
  }
  // .el-dialog__body {
  //   height: 600px;
  //   overflow: auto;
  // }
  .el-form-item__content,
  .el-date-editor,
  .el-select,
  .el-textarea {
    width: 100% !important;
  }
  .buttom {
    width: 100%;
    .flex;
  }
  .mores {
    .flex;
    justify-content: flex-start;
    .more-title {
      font-size: 12px;
      font-family: SourceHanSansSC;
      font-weight: 400;
      color: rgb(153, 153, 153);
      font-style: normal;
      letter-spacing: 0px;
      line-height: 20px;
      text-decoration: none;
      margin-right: 1rem;
    }
  }
}
</style>
